<template>
  <div>
    <el-dialog
      title="修改头像"
      :visible.sync="dialogVisible"
      width="650px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <!-- <el-form :model="bindForm" :rules="rules" ref="refAddInfo" label-width="100px">
        </el-form> -->

      <div class="title">从个性头像库里选择一张图片作为头像</div>

      <div class="fSmTyF">
        <div>
          <img :src="src" alt="" @click="edit(1)" style="width: 110px; height: 110px" />
          <img :src="src2" alt="" @click="edit(2)" style="width: 110px; height: 110px" />
          <img :src="src3" alt="" @click="edit(3)" style="width: 110px; height: 110px" />
          <img :src="src4" alt="" @click="edit(4)" style="width: 110px; height: 110px" />
          <img :src="src5" alt=""  @click="edit(5)" style="width: 110px; height: 110px" />
          <img :src="src6" alt="" @click="edit(6)" style="width: 110px; height: 110px" />
        </div>
        <div>
          <img :src="Img" alt="" style="width: 110px; height: 110px" />
          <div>头像预览</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="editSubmit" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {  updateUser } from "@/api/api";
import { mapState } from "vuex";
import { validMobile } from "@utils/validate";

export default {
  name: "add",
  components: {},
  data() {
    return {
      dialogVisible: false,
         src: require("@assets/images/touxiang1.png"),
      src2: require("@assets/images/touxiang2.png"),
      src3: require("@assets/images/touxiang3.png"),
      src4: require("@assets/images/touxiang4.png"),
      src5: require("@assets/images/touxiang5.png"),
      src6: require("@assets/images/touxiang6.png"),
      Img:require("@assets/images/touxiang1.png")
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    edit(i){
      // console.log(i)
      if(i==1){
        this.Img=this.src;
      }else if(i==2){
        this.Img=this.src2;
      }else if(i==3){
        this.Img=this.src3;
      }else if(i==4){
        this.Img=this.src4;
      }else if(i==5){
        this.Img=this.src5;
      }else if(i==6){
        this.Img=this.src6;
      }
      this.avatar=i;
    },
    async editSubmit() {
      const res = await updateUser({
            id: this.user.userId,
            avatar: this.avatar,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("修改成功");
            this.$store.commit("saveAvatar", this.avatar); //页面更换昵称
          this.dialogVisible = false;
    },
    // 点击关闭弹框
    closeEditDialog() {
      // this.$refs.refAddInfo.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
.fSmTyF {
  display: flex;
  margin-top: 20px;
  > div:first-of-type {
    flex: 2;
    height: 140px;
    background: #fff;
    border: 1px solid rgb(217, 217, 217);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    img {
      margin-top: 15px;
      cursor: pointer;
    }
  }

  > div:last-of-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    div {
      margin-top: 10px;
      color: @primaryThemeTxtColor;
    }
  }
}
.title {
  color: @primaryThemeTxtColor;
}
</style>
